<template>
  <div>
    <h-box>

      <!-- 用户个人信息，start -->
      <div slot="header" class="hui-flex hui-flex--y-center">
        <div class="hui-flex__none hui-mr-1">
          <h-image :src="account.headimgurl" size="60px" border-radius="2px" mode="background-image"></h-image>
        </div>
        <div class="hui-flex__auto">
          <div class="hui-font-size-medium hui-font-weight-primary">{{ account.nickname }}</div>
          <div class="hui-font-size-base hui-color-text-secondary hui-mt-5px">{{ `手机号:  ${account.mobile}` }}</div>
        </div>
      </div>
      <!-- 用户个人信息，end -->

      <!-- 品牌操作区，start -->
      <div>
        <h3 class="hui-font-size-medium hui-font-weight-primary hui-mb-1">我管理的品牌</h3>

        <el-row type="flex" :gutter="20" class="hui-flex--warp">

          <!-- 新建，start -->
          <el-col :span="8">
            <div @click="handleInvitation">
              <el-card shadow="hover" class="hui-account-dashboard-add">
                <i class="el-icon-plus"></i>
                <span>创建一个新品牌</span>
              </el-card>
            </div>
          </el-col>
          <!-- 新建，end -->

          <!-- 已有的品牌，start -->
          <el-col :span="8" v-for="item in business" :key="item.id">
            <div @click="handleBusiness(item.id)">
              <el-card shadow="hover" class="hui-account-dashboard-card">
                <div slot="header" class="hui-flex hui-flex--y-center">
                  <div class="hui-flex__auto hui-font-size-small hui-color-text-regular">认证状态</div>
                  <div class="hui-flex__none">
                    <el-tag v-if="item.verifyTypeInfo === 0" type="success" size="small">微信认证</el-tag>
                    <el-tag v-else-if="item.verifyTypeInfo === -1" type="warning" size="small">未认证</el-tag>
                  </div>
                </div>
                <div class="hui-flex hui-flex--y-center">
                  <div class="hui-flex__none hui-mr-1">
                    <h-image :src="item.headImg" size="48px" border-radius="50%" mode="background-image"></h-image>
                  </div>
                  <div class="hui-flex__auto hui-overflow-hidden">
                    <div class="hui-font-size-base hui-font-weight-primary">{{ `品牌: ${item.nickName}` }}</div>
                    <div class="hui-font-size-small hui-color-text-secondary hui-mt-5px hui-ellip-1">{{ `主体: ${item.principalName}` }}</div>
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>
          <!-- 已有的品牌，end -->
        </el-row>
      </div>
      <!-- 品牌操作区，end -->
    </h-box>
  </div>
</template>

<script>
export default {
  data () {
    return {
      account: {
        headimgurl: '',
        nickname: '',
        mobile: ''
      },
      business: []
    }
  },
  computed: {},
  methods: {
    getAccount () {
      let tmp = {
        headimgurl: this.$random.randomEnum(this.$store.state.image),
        nickname: this.$random.randomEnum(this.$store.state.nickName),
        mobile: '13262268525'
      }
      this.account = tmp
    },
    getBusiness () {
      let tmp = []
      let i = 10
      while (i > 0) {
        tmp.push({
          id: i,
          verifyTypeInfo: this.$random.randomEnum([-1, 0]),
          nickName: `品牌名称${i}`,
          headImg: this.$random.randomEnum(this.$store.state.image),
          principalName: `主体名称${i}主体名称${i}主体名称${i}`
        })
        i--
      }
      this.business = tmp
    },
    handleBusiness (id) {
      console.log('click')
      this.$router.push({
        path: '/home',
        query: {
          businessId: id
        }
      })
    },
    handleInvitation () {
      this.$router.push({
        path: 'invitation'
      })
    }
  },
  created () {
    this.getAccount()
    this.getBusiness()
  },
  mounted () {}
}
</script>

<style lang="less">
@import "../../../common/h-theme/_variable.less";

.hui-account-dashboard-add,
.hui-account-dashboard-card {
  position: relative;
  bottom: 0;
  margin-bottom: 20px;
  cursor: pointer;
  user-select: none;

  &::before {
    .setActive();
  }

  &:hover {
    bottom: 5px;
  }

  &:active {
    &::before {
      opacity: .08;
    }
  }
}

.hui-account-dashboard-add {
  display: flex;
  height: 151px;
  align-items: center;
  justify-content: center;
  color: @--link-color;

  &:hover {
    color: @--link-hover-color;
  }
}
</style>
